<template>
  <div class="box">
    <div>
      <div class="box1"></div>
      工种字典
    </div>
    <div class="btn">
      <el-button
        text
        @click="dialogFormVisible = true"
        style="background-color: orange; border: 0px"
        type="primary"
      >
        新增
      </el-button>

      <el-dialog v-model="dialogFormVisible" title="新增工种">
        <el-form :model="form">
          <el-form-item label="账户账号" prop="admin">
            <el-input v-model="form.jobsnames" placeholder="请输入工种名称" />
          </el-form-item>
          <hr />
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addJobs">确定</el-button>
            <el-button @click="dialogFormVisible = false"> 取消 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
  <div class="main">
    <div class="top"><h1>工种列表</h1></div>
    <div>
      搜索<el-input v-model="love.jobsnames" placeholder="请输入工种名称" />
      <el-button type="primary" @click="searchFn">搜索</el-button>
    </div>
  </div>
  <div class="buttom">
    <el-table
      :data="tableData.slice((page - 1) * limit, page * limit)"
      style="width: 100%; align: center"
      border="true"
    >
      <el-table-column align="center" prop="id" label="序号" width="100">
        <template #default="scope">
          <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="jobsnames" label="工种名称" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button @click="reviseFn(scope.row.jobsnames)">编辑</el-button>

          <el-popconfirm
            title="您确定要删除吗?"
            @confirm="deleteFn(scope.row.id)"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      small
      :total="(tableData.length / 4) * 10"
      style="float: right"
      v-model:current-page="currentpage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
    />
  </div>
  <revise
    :id="reviseId"
    v-show="isShowRevise"
    @updatesuccess="succseeFn"
    @hide="hideFn"
    :jobsnames="editjobsnames"
  ></revise>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import revise from "./revise.vue";

const dialogFormVisible = ref(false);

interface IJobs {
  id: string;
  jobsnames: string;
}

const tableData = reactive<IJobs[]>([]);

const getjobslist = () => {
  service({
    url: "jobslist",
    method: "get",
  }).then((res) => {
    tableData.length = 0;
    tableData.push(...res.data);
  });
};
getjobslist();

//分页
const total = ref();

const limit = ref(4);
const page = ref(1);
const currentpage = ref();

const changePage = (value: number) => {
  page.value = value;
  currentpage.value = value;
  service({
    url: "jobslist",
    method: "get",
    params: {
      _page: currentpage.value,
      _limit: 4,
    },
  }).then((res) => {});
};
interface IForm {
  jobsnames: string;
}
const form = reactive<IForm>({
  jobsnames: "",
});
const addJobs = () => {
  service({
    url: "jobslist",
    method: "post",
    data: form,
  }).then((res) => {
    dialogFormVisible.value = false;

    ElMessage({
      message: "添加成功",
      type: "success",
    });
    getjobslist();
  });
};

//搜索数据
const love = reactive<{
  jobsnames?: string;
}>({});

const searchFn = () => {
  service({
    url: "jobslist",
    method: "get",
    params: love,
  }).then((res) => {
    tableData.length = 0;
    tableData.push(...res.data);
    total.value = res.data.length; //获取搜索后的数组长度
  });
};

//编辑数据
const isShowRevise = ref(false);
const reviseId = ref(""); // 修改的工种

const hideFn = () => {
  isShowRevise.value = false;
};

const reviseFn = (jobsnames: string) => {
  reviseId.value = jobsnames;
  isShowRevise.value = true;
};
const succseeFn = () => getjobslist();

//删除数据
const deleteFn = (id: number) => {
  service({
    url: "jobslist/" + id,
    method: "delete",
  }).then((res) => {
    ElMessage({
      message: "删除成功！",
      type: "success",
    });
    getjobslist();
  });
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 50px;
  background-color: rgba(128, 128, 128, 0.09);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: gray;
}

.box .box1 {
  width: 5px;
  height: 15px;
  background-color: greenyellow;
  float: left;
  margin-right: 5px;
}
.main {
  margin-top: 15px;
  border-top: 1px solid rgba(128, 128, 128, 0.122);
}
.main .top {
  display: flex;
  align-items: center;
  height: 60px;
}
.main .top h1 {
  font-weight: 700;
}
.main .el-input {
  width: 270px;
  margin-left: 20px;
  margin-right: 20px;
}
.buttom {
  margin-top: 15px;
}
</style>